import Vue from 'vue'
import Vuex from 'vuex'
import shoppingCart from '../request/api/shoppingCartAPI'
import order from '../request/api/order'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {//存放数据的仓库
        user: null,
        showLogin: false, //登录组件是否展示
        shopcartList:[]  // 购物车数据
    },
    getters: {//相当于计算属性
        userInfo(state){
            return state.user
        },
        userName(state, getters){
            //容错处理,刚开始未登录的时候 user是没有内容的,如果直接读userInfo则返回null
            return getters.userInfo ? getters.userInfo.userName : ""
        },
        getShowLogin(state){
            return state.showLogin
        },
        getShopCart(state){  // 获取购物车所有的数据
            return state.shopcartList
        },
        getCkAll(state){ // 获取全选
            let flag = state.shopcartList.every(item=>item.check)
            return flag
        },
        getAllNum(state){ // 获取所有的数量
            let num = 0
            state.shopcartList.forEach(item=>{
                num+=item.num
            })
            return num
        },
        getAllCheckGoods(state){  // 获取选中的商品
            let num = 0
            state.shopcartList.forEach(item=>{
                if(item.check){
                    num+=item.num
                }
            })
            return num
        },
        getAllTotal(state){  // 获取总价
            let num = 0
            state.shopcartList.forEach(item=>{
                if(item.check){
                    num+=item.num * item.price
                }
            })
            return num
        },
        showGoShop(state){  // 判断子复选框是否存在选中的，存在就让 去结算 显示
            let flag = state.shopcartList.some(item=>item.check)
            return flag
        },
        getCheckShopList(state){  // 过滤出选中的商品
            return state.shopcartList.filter(item=>item.check)
        }
    },
    mutations: {//唯一可以修改state数据的方法集合
        setUser(state, data){
            state.user = data;
        },
        setShowLogin(state, data){
            state.showLogin = data;
        },
        setShopCart(state,data){
            state.shopcartList = data
            console.log(state.shopcartList);
        },
        setCkAll(state,bool){
            state.shopcartList.forEach(item=>item.check = bool)
        },
        setUpdateShopCartCheck(state,obj){
            let index = state.shopcartList.findIndex(item=>item.id == obj.id)
            state.shopcartList[index].check = obj.check
        },
        setUpdateShopCartNum(state,obj){
            // console.log(obj);
            let index = state.shopcartList.findIndex(item=>item.productID == obj.product_id)
            state.shopcartList[index].num = obj.num
            state.shopcartList[index].check = true
        },
        delHandle(state,id){
            let index = state.shopcartList.findIndex(item=>item.productID == id)
            state.shopcartList.splice(index,1)
        }
    },

    /*
    *
    *
    * 在mutation中，mutation中是存放处理数据的方法的集合，
    * 我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。
    * 那我们想异步操作怎么办？
    * 作用：在actions中提交mutation，并且可以包含任何的异步操作。
    * actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，
    * 简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）
    *
    * */
    actions: {//处理异步操作的
        // Action 提交的是 mutation，而不是直接变更状态。
        // Action 可以包含任意异步操作。
        setShopCart({commit},payload){
            commit('setShopCart',payload)
        },
        setCkAll({commit},bool){
            commit('setCkAll',bool)
        },
        setUpdateShopCartCheck({commit},payload){
            commit('setUpdateShopCartCheck',payload)
        },
        async setUpdateShopCartNum(ctx,payload){  // 向后端发送修改num操作
            // updateShoppingCart
            // console.log(payload,ctx);
            let obj = {
                user_id:ctx.state.user.user_id,
                product_id:payload.productID,
                num:payload.num,
            }
            let {data:res} = await shoppingCart.updateShoppingCart(obj)
            if(res.code === '001'){
                Vue.prototype.$notifySuccess(res.msg)
                ctx.commit('setUpdateShopCartNum',obj)
            }
        },
        async delHandle(ctx,id){  // 向后端发送删除操作
            // deleteShoppingCart
            let obj = {
                user_id:ctx.state.user.user_id,
                product_id:id,
            }
            let {data:res} = await shoppingCart.deleteShoppingCart(obj)
            if(res.code === '001'){
                Vue.prototype.$notifySuccess(res.msg)
                ctx.commit('delHandle',id)
            }
        },
        async toShop(ctx){  // 向后端发起结算，结算完需要跳转订单页面
            let obj = {
                user_id:ctx.state.user.user_id,
                products:ctx.getters.getCheckShopList,
            }
            let {data:res} = await order.addOrder(obj)
            console.log(res);
        }
    },
    modules: {//模块化
        //用户模块
        //购物车
    }
})
